<template>
  <div class="padding-l-20 padding-r-20 padding-t-20 h-100 table-page">
    <log-component
      ref="logComponent"
      :data="data"
      :columns="columns"
      :loading="loading"
      :exportLoading="exportLoading"
      :searchForm="searchForm"
      :exportBtn="permission('sys:log:operateExport')"
      :total="total"
      :page="page"
      @exportLog="exportLog"
      @tableChange="onTableChange"
    >
      <a-space>
        <a-input
          placeholder="请输入用户帐号"
          enter-button
          v-model="searchForm.createRealName"
        />
<!--        <a-select-->
<!--          class="_select"-->
<!--          v-model="searchForm.logType"-->
<!--          @change="-->
<!--            page.currentPage = 1;-->
<!--            getList(page, searchForm);-->
<!--          "-->
<!--        >-->
<!--          <a-select-option :key="item.key" v-for="item in typeArr">{{-->
<!--            item.name-->
<!--          }}</a-select-option>-->
<!--        </a-select>-->
          <a-range-picker @change="onChangeDate" style="width: 250px" v-model="searchTime">
              <a-icon slot="suffixIcon" type="calendar" />
          </a-range-picker>
          <a-space>
              <a-button
                      class="nbcs-btn-search"
                      @click="getList(page, searchForm)"
              >查询</a-button>
              <a-button
                      class="nbcs-btn-default"
                      @click="clearObj(searchForm); searchTime=[];searchForm.orderBy ='desc'"
              >重置
              </a-button>
          </a-space>

      </a-space>
    </log-component>
  </div>
</template>

<script>
    import {clearObj} from '../../utils/util';

    import LogComponent from "@/components/log/logComponent";
import { operateLog, exportOperaterLog } from "@/services/log";
import { getOrgByUser } from '@/services/org';
import {exportExcel, blobToJson} from '@/utils/util';
export default {
  name: "operateLog",
  components: { LogComponent },
  data() {
    return {
      loading: false,
      exportLoading: false,
      data: [],
      orgArr:[],
      columns: [
          // { title: "#", width: 100, dataIndex: "id", key: "#" },
        {
          title: "操作帐号",
          dataIndex: "createUserName",
        },
        // {
        //     title: "所属组织",
        //     dataIndex: "orgId",
        //     customRender: (text) => {
        //       let name = ''
        //       this.orgArr.forEach((item) => {
        //         if (item.id == text) name = item.name;
        //       })
        //       return name;
        //     },
        //   },
        // {
        //   title: "事件类型",
        //   dataIndex: "logType",
        //   customRender: text => {
        //     if(text == 1){
        //       return '用户'
        //     } else if(text == 2){
        //       return '角色'
        //     } else if(text == 3){
        //       return '集团'
        //     } else if(text == 4){
        //       return '设备'
        //     }
        //   }
        // },
        // {
        //   title: "操作内容",
        //   dataIndex: "title",
        // },
        {
          title: "来源IP",
          dataIndex: "remoteAddr",
        },
        {
            title: '创建时间',
            dataIndex: 'createTime',
            scopedSlots: { customRender: 'createTime' },
            sorter: ()=>{},
        },
        // {
        //     title: "访问路径",
        //     dataIndex: 'type',
        //     scopedSlots: { customRender: 'type' },
        // },
        {
            title: "说明",
            dataIndex: 'title',
        }
      ],
      searchTime: [],
      searchForm: {
        createRealName: "",
        logType: "",
        beginTime: "",
        endTime: "",
        orderBy: 'desc'
      },
      page: {
        currentPage: 1, //分页
        pageSize: 20, // 默认每页显示数量
      },
      total: 0,
      typeArr: [
        { key: "", name: "事件类型（全部）" },
        { key: "1", name: "用户" },
        { key: "2", name: "角色" },
        { key: "3", name: "集团" },
        { key: "4", name: "设备" },
      ],
    };
  },
  created() {
    Promise.all([getOrgByUser()]).then(res=>{
      if (res[0].data.code === 0) {
        this.orgArr = [...this.orgArr, ...res[0].data.data];
      }
      this.getList(this.page);
    })
  },
    mounted() {
        this.tableHeight = document.querySelector('.table-page').clientHeight - 276;
    },
  methods: {
    // onShowSizeChange(data) {
    //   this.page.currentPage = data.page;
    //   this.page.pageSize = data.pageSize;
    //   this.getList(this.page);
    // },
    // onPageChange(data) {
    //   this.page.currentPage = data.page;
    //   this.getList(this.page);
    // },
      clearObj,
      permission(name) {
          let permissions = this.$store.getters["account/permissions"];
          return permissions.filter(m => m.operation.indexOf(name) >= 0).length > 0
      },
    onTableChange({pagination,sorter}){
      this.page.currentPage = pagination.current;
      this.page.pageSize = pagination.pageSize;
      this.searchForm.orderBy = sorter.order == 'ascend' ? 'asc' : 'desc';
      this.getList(this.page);
    },
    getList(page, params) {
      this.loading = true;
      operateLog(
        Object.assign(
          {
            page: page.currentPage,
            pageSize: page.pageSize,
          },
          params,
          this.searchForm
        )
      ).then((res) => {
        this.loading = false;
        if (res.data.code === 0) {
          this.$refs.logComponent.changePageCurrent(res.data.data.page);
          this.data = res.data.data.list;
          this.total = res.data.data.totalRow;
        }
      });
    },
      onChangeDate(date , dateStrings) {
          if (dateStrings[0]){
              this.searchForm.beginTime = dateStrings[0] + " 00:00:00";
          }
          if (dateStrings[1]){
              this.searchForm.endTime = dateStrings[1] + " 23:59:59";
          }
      },
    async exportLog() {
      this.exportLoading = true;
      let res = await exportOperaterLog(this.searchForm)
      this.exportLoading = false;
      if(res.data.type == 'application/json'){
        blobToJson(res.data).then(res => {
            if(res.code == 401){
            this.$message.warning('登录已失效，请重新登录');
            this.$router.replace({path: '/login'})
            } else {
            this.$message.error(res.message);
            }
        });
      } else {
        exportExcel(res.data, "操作日志.xlsx");
      }
    },
  },
};
</script>

<style lang="less" scoped>
._select {
  width: 180px;
}
.table-page {
  .ant-table-wrapper {
    max-height: calc(100% - 150px);
  }
}
</style>
